<!--
 * @Author: 冯本桥
 * @Date: 2025-02-27 14:10:14
 * @LastEditTime: 2025-03-06 08:56:33
 * @LastEditors: 冯本桥
 * @Description:
 * @FilePath: \teach_system_fe\src\views\teacherManagement\component\NestedForm.vue
-->
<template>
  <div>
    <div v-for="(item, i) in ruleForm" :key="i" class="input-item-box">
      <div class="flex-box">
        <div>第{{ i + 1 }}节</div>
        <div v-if="disabledFrom" class="flex-box">
          <i
            style="font-size: 20px"
            class="el-icon-circle-plus-outline"
            @click="addInput(item)"
          />
          <span style="margin: 0 5px">|</span>
          <i
            style="font-size: 20px"
            class="el-icon-delete"
            @click="deleteInput(i)"
          />
        </div>
      </div>

      <el-form-item label="小节标题" prop="name">
        <el-input v-model="item.name" placeholder="请输入课程小节标题" />
      </el-form-item>

      <el-form-item label="视频信息" prop="videoAddress">
        <el-input
          v-model="item.videoAddress"
          placeholder="请输入视频链接或在下方上传视频"
        />
      </el-form-item>

      <el-form-item>
        <el-upload
          class="upload-demo"
          action="/api/system/upload"
          multiple
          :limit="1"
          :on-preview="openFile"
          :file-list="getFileList(item.videoAddress)"
          :on-remove="
            (file, fileList) => handleRemove(file, fileList, 'videoAddress')
          "
          :before-upload="beforeVideoUpload"
          :on-success="
            (response, file, fileList) =>
              handleAvatarSuccess(
                response,
                file,
                fileList,
                item,
                'videoAddress'
              )
          "
        >
          <el-button size="small" icon="el-icon-upload2">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <!-- 如果有子级，则递归调用组件渲染子项 -->
      <nested-form
        v-if="item.childList && item.childList.length"
        :disabled-from="disabledFrom"
        :rule-form="item.childList"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'NestedForm',
  props: {
    ruleForm: {
      type: Array,
      required: true
    },
    disabledFrom: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      videoAccept: 'video/mp4, video/webm, video/ogg' // 支持的视频格式
    }
  },
  computed: {
    getFileList () {
      return (value) => {
        const urlArray = value?.split(',').filter((url) => url.trim() !== '')
        return urlArray?.map((url) => ({ url: url.trim(), name: url.trim() }))
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    addInput (item) {
      // 确保 childList 是响应式的
      if (!item.childList) {
        this.$set(item, 'childList', [])
      }

      // 添加子项
      item.childList.push({
        name: '',
        videoAddress: '',
        childList: []
      })
    },

    openFile (file) {
      window.open(file.url)
    },

    beforeVideoUpload (file) {
      // 可以加入一些上传前的检查，检查是否为视频文件
      const isVideo = file.type.startsWith('video/')
      if (!isVideo) {
        this.$message.error('请上传视频文件')
      }
      return isVideo
    },
    deleteInput (index) {
      // 删除当前项
      this.ruleForm.splice(index, 1)
    },

    handleAvatarSuccess (response, file, fileList, item, key) {
      const a = []
      fileList.forEach((element) => {
        if (
          element.response &&
          element.response?.data &&
          element.response?.data.url
        ) {
          a.push(element.response.data.url)
        }
      })
      const newValue =
        this.ruleForm[key] && this.ruleForm[key]?.trim() !== ''
          ? this.ruleForm[key] + ',' + a.join(',')
          : a.join(',')
      this.$set(item, key, newValue)
    },

    handleRemove (file, fileList, item) {
      if (!fileList.length) {
        this.ruleForm[item] = ''
        return
      }
      const a = []
      fileList.forEach((element) => {
        if (element.url) {
          a.push(element.url)
        }
      })
      this.$set(this.ruleForm, item, a.join(','))
    }
  }
}
</script>

<style scoped lang="scss">
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-box {
    font-weight: bold;
    font-size: 20px;
  }
}

.input-item-box {
  padding: 20px 20px;
  background-color: #fafafc;
  border: 1px solid #ebebee;
  border-radius: 5px;
  margin-top: 20px;
}
</style>
